Skip to content
lab components / Data Visualization

Scale

Visually communicate the status or progress of an item using a clear, linear 3- or 4-step scale.

Examples3-step variantPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { Scale } from "@siteimprove/fancylab";

#Examples

The Scale component visually communicates the relative status or progress of an item using a linear sequence of steps. Use it to quickly convey information where precise values are not needed.

#Variations

The component can appear with either 3 or 4 steps. The default is 4 steps. The variant is controlled by the optional length parameter.

#Basic Usage

The Scale component helps users quickly assess a value within a defined range (e.g., task difficulties, severity, priority).

<Scale value={1} /> <Scale value={2} /> <Scale value={3} /> <Scale value={4} />

#Warm Color Range

Use a progression of warm colors (i.e., green to orange to red) to convey increasing intensity or urgency.

<Scale colorRange="warm" value={1} /> <Scale colorRange="warm" value={2} /> <Scale colorRange="warm" value={3} /> <Scale colorRange="warm" value={4} />

#Reverse Color Range

Reverse the cool or warm color range (e.g., red to orange to green) for situations where higher values are more negative.

<Scale reverseColorRange value={1} /> <Scale reverseColorRange value={2} /> <Scale reverseColorRange value={3} /> <Scale reverseColorRange value={4} />

#Monochrome

Use a single color derived from the Heatrange warm/cold design tokens, with varying saturation and value to visually indicate progression.

<Scale colorRange="warm" monochrome value={1} /> <Scale colorRange="warm" monochrome value={2} /> <Scale colorRange="warm" monochrome value={3} /> <Scale colorRange="warm" monochrome value={4} />

#Monochrome Reverse

Reverse the monochrome progression for alternative scenarios.

<Scale monochrome reverseColorRange value={1} /> <Scale monochrome reverseColorRange value={2} /> <Scale monochrome reverseColorRange value={3} /> <Scale monochrome reverseColorRange value={4} />

#Shape Options

  • Circles: Familiar and friendly, best for discrete steps and conveying a softer aesthetic.
  • Round square: A balanced choice combining the approachability of circles with a more structured feel.
  • Sharp square: Project a technical and precise look, ideal for data-driven contexts and formal interfaces.
<Scale shape="circle" value={2} /> <Scale shape="soft" value={2} /> <Scale shape="square" value={2} />

#3-step variant

  • All customization options for the 4-step scale apply to the 3-step variant.
  • Consider this variant when a more simplified representation is suitable.
<Scale length={3} value={1} /> <Scale length={3} value={2} /> <Scale length={3} value={3} /> <Scale length={3} value={1} colorRange="warm" /> <Scale length={3} value={2} colorRange="warm" /> <Scale length={3} value={3} colorRange="warm" />

#Properties

PropertyDescriptionDefinedValue
valueRequired
1 | 2 | 3 | 4
lengthOptional
3 | 4
colorRangeOptional
"cool" | "warm"
monochromeOptional
booleanSame color for all levels depending on the value
reverseColorRangeOptional
boolean
shapeOptional
"circle" | "soft" | "square"
aria-labelOptional
string
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
tabIndexOptional
numberTab index of the outermost HTML element of the component
onKeyDownOptional
functionCallback for onKeyDown event
onMouseDownOptional
functionCallback for onMouseDown event
onMouseEnterOptional
functionCallback for onMouseEnter event
onMouseLeaveOptional
functionCallback for onMouseLeave event
onFocusOptional
functionCallback for onFocus event
onBlurOptional
functionCallback for onBlur event
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

#General

Use Scale when

  • Visually communicate the status or progress of an item to the user.
  • You want to quickly communicate a relative value (e.g., "easy," "medium," "difficult").

#Placement

Scale is typically used in the following places:

  • Table and List table: To display the status of individual items.
  • Highlight: To provide an overview of progress or performance.
  • Task Difficulty: Indicate how easy or difficult a task is (e.g., "Easy," "Medium," "Hard").
  • Product Ratings: Display user-generated ratings or reviews.
  • Skill Level: Represent the proficiency level required for a task or activity.

#Style

  • Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your Scale to existing components for visual consistency.
  • Steps should be arranged in a single, horizontal or vertical line.
  • A minimum of 3 steps, maximum of 4, to maintain clarity.
  • Each step should be visually distinct from the others (color, fill, icon, etc.)
  • Apply the Scale component consistently throughout your interface for similar types of data or assessments.
  • Use the Scale only when relative value is the primary communication goal. Avoid it for precise measurements.
  • Ensure the scale's direction is consistent (left-to-right).
  • Don't assume all users will interpret the scale in the same way.

#Do not use when

  • The data is not linear or has complex relationships.
  • Precise numerical values are required (use a numerical input instead).
  • You have more than four distinct categories to display.

#Accessibility

#For designers

  • Ensure sufficient color contrast and consider alternative indicators (patterns, icons) for colorblind users.
  • Don't rely solely on color to convey meaning.

#For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

  • Keep labels short, clear, and consistent.
  • Ensure the context around the Scale component explains its purpose and meaning.